<template>
  <div class="live_broad">
        <div class="search">
            <div class="left">
                <!-- 项目 -->
                <div class="search_list project_name">
                    <span class="search_text">项目名称：</span>
                    <el-select v-model="project_name" filterable clearable placeholder="请选择">
                        <el-option
                            v-for="item in related_project_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <!-- 开始时间 -->
                <div class="search_list">
                    <span class="search_text">开始时间：</span>
                    <el-date-picker
                        v-model="start_time"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </div>
            </div>
            <div class="center">
                <!-- 标题名称 -->
                <div class="search_list">
                    <span class="search_text">直播标题：</span>
                    <el-input v-model="live_title" placeholder="输入"></el-input>
                </div>
            </div>
            <div class="right">
                <!-- 状态 -->
                <div class="search_list">
                    <span class="search_text">直播状态：</span>
                    <el-select v-model="live_status" clearable placeholder="请选择">
                        <el-option
                            v-for="item in live_status_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <!--列表-->
        <div class="list live_list blockMould">
            <div class="list_head_button">
                <div class="search_button">
                    <el-button size="mini" type="warning" plain @click="get_live_info" v-if="is_syncing">获取更新</el-button>
                    <el-button size="mini" type="info" v-if="!is_syncing" disabled>同步中</el-button>
                    <div class="last_update_time">
                        末次更新时间：{{last_update_time}}
                    </div>
                </div>
                <div class="search_name">
                    <el-button size="mini" type="primary" @click="search_list">查询</el-button>
                    <el-button size="mini" @click="reset_list">重置</el-button>
                </div>
            </div>
            <el-table
                :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
                :row-class-name="tableRowClassName"
                :data="liveList">
                <el-table-column
                    prop="channelId"
                    label="频道号"
                    min-width="11">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="标题"
                    min-width="20">
                </el-table-column>
                <el-table-column
                    label="项目名称"
                    min-width="20">
                    <template slot-scope="scope">
                        <el-tooltip
                            trigger="hover"
                            placement="top"
                            v-model="scope.row.is_show_product_tip"
                            :open-delay="500"
                            effect="dark"
                            :disabled="scope.row.is_show_product_tip"
                            popper-class="export_button_promit show_all_title">
                            <div slot="content">{{scope.row.productName}}</div>
                            <div @mouseenter="showProductTips($event,scope.row)"
                            class='show_all_tip'>{{scope.row.productName}}</div>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column
                    label="状态"
                    min-width="13">
                    <template slot-scope="scope">
                        <span :style="{background:scope.row.bgcolor,color:scope.row.color}">{{scope.row.watchStatusText}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="startTime"
                    label="开始时间"
                    min-width="18">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="8">
                    <template slot-scope="scope">
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="编辑" placement="bottom">
                            <el-button type="text" @click="get_edit_info(scope.row)">
                                <img src="../../assets/common/edit.svg" alt="">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="链接" placement="bottom">
                            <el-button type="text" @click="show_link(scope.row)">
                                <img src="../../assets/common/active_link.svg" alt="">
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
        </div>
        <!-- 链接 -->
        <el-dialog
        title="链接"
        :visible.sync="activeLink"
        width="626px"
        class="active_link_dialog"
        :before-close="closeActiveDialog">
            <div>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="观众" name="audience" class="tab_audience">
                        <div class="search_list active_title">
                            <span class="search_text">标题：</span>
                            <span class="search_value">{{active_title}}</span>
                        </div>
                        <div class="search_list link_url">
                            <span class="search_text">链接：</span>
                            <el-input placeholder="请输入内容" v-model="audience_active_url" :disabled="true"></el-input>
                            <el-button 
                                class="btn" 
                                type="primary" 
                                v-clipboard:copy="audience_active_url" 
                                v-clipboard:success="audience_copy_link">复制链接
                            </el-button>
                        </div>
                        <div class="search_list qrcode">
                            <span class="search_text">二维码：</span>
                            <div class="qr_code" ref="qrCodeUrl" v-if="is_show_qr_code"></div>
                        </div>
                        <div class="copy_success">
                            <span v-show="is_show_audience_copy_success">复制成功</span>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="讲师" name="teacher" class="tab_teacher">
                        <div class="search_list active_title">
                            <span class="search_text">标题：</span>
                            <span class="search_value">{{active_title}}</span>
                        </div>
                        <div class="search_list link_url web_link_url">
                            <span class="search_text">网页链接：</span>
                            <el-input placeholder="请输入内容" v-model="teacher_active_web_url" :disabled="true"></el-input>
                            <el-button 
                                class="btn" 
                                type="primary" 
                                v-clipboard:copy="teacher_active_web_url" 
                                v-clipboard:success="teacher_copy_link">复制链接
                            </el-button>
                            <a class="open_btn" :href="teacher_active_web_url" target="_blank">
                                <span>打开</span>
                                <img src="../../assets/common/jump.svg" alt="">
                            </a>
                        </div>
                        <div class="search_list link_url client_link_url">
                            <span class="search_text">客户端链接：</span>
                            <el-input placeholder="请输入内容" v-model="teacher_active_client_url" :disabled="true"></el-input>
                            <el-button 
                                class="btn" 
                                type="primary" 
                                v-clipboard:copy="teacher_active_client_url" 
                                v-clipboard:success="teacher_copy_link">复制链接
                            </el-button>
                            <a class="open_btn" :href="teacher_active_client_url" target="_blank">
                                <span>打开</span>
                                <img src="../../assets/common/jump.svg" alt="">
                            </a>
                        </div>
                        <div class="search_list channel_number">
                            <span class="search_text">账号信息：</span>
                            <el-button 
                                icon="el-icon-caret-right" 
                                v-if="is_show_teacher_account_info"
                                @click="show_teacher_account">
                            </el-button>
                            <el-button 
                                icon="el-icon-caret-bottom" 
                                v-if="!is_show_teacher_account_info"
                                @click="show_teacher_account">
                            </el-button>
                        </div>
                        <div class="teacher_account_info" v-if="!is_show_teacher_account_info">
                            <div class="channel">
                                <span>频道号</span>
                                <div>{{teacher_channel_id}}</div>
                            </div>
                            <div class="password">
                                <span>登录密码</span>
                                <div>{{teacher_channel_password}}</div>
                            </div>
                        </div>
                        <div class="copy_success">
                            <span v-show="is_show_teacher_copy_success">复制成功</span>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="助教" name="assistant" class="tab_assistant">
                        <div class="search_list active_title">
                            <span class="search_text">标题：</span>
                            <span class="search_value">{{active_title}}</span>
                        </div>
                        <div class="search_list link_url">
                            <span class="search_text">后台链接：</span>
                            <el-input placeholder="请输入内容" v-model="assistant_backstage_active_url" :disabled="true"></el-input>
                            <el-button 
                                class="btn" 
                                type="primary" 
                                v-clipboard:copy="assistant_backstage_active_url" 
                                v-clipboard:success="assistant_copy_link">复制链接
                            </el-button>
                            <a class="open_btn" :href="assistant_backstage_active_url" target="_blank">
                                <span>打开</span>
                                <img src="../../assets/common/jump.svg" alt="">
                            </a>
                        </div>
                        <div class="search_list channel_number">
                            <span class="search_text">账号信息：</span>
                            <el-button 
                                icon="el-icon-caret-right" 
                                v-if="is_show_all_channel"
                                @click="showAllChannel">
                            </el-button>
                            <el-button 
                                icon="el-icon-caret-bottom" 
                                v-if="!is_show_all_channel"
                                @click="showAllChannel">
                            </el-button>
                        </div>
                        <div class="assistant_account_info" v-if="!is_show_all_channel">
                            <div class="title">
                                <span>频道号</span>
                                <span>登录密码</span>
                            </div>
                            <div class="info">
                                <div v-for="(item, index) in assistant_channel_content" :key="index">
                                    <span>{{item.assistantAccount}}</span>
                                    <span>{{item.assistantPasswd}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="copy_success">
                            <span v-show="is_show_assistant_copy_success">复制成功</span>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
        <!-- 同步数据 -->
        <el-dialog
        :visible.sync="sync_data"
        width="364px"
        class="sync_data">
            <div>
                <div class="is_sync_data">
                    <span>{{this.last_sync_time}}已完成最新数据的同步。是否需要再次同步？</span>
                </div>
                <div class="refresh">
                    <span>点击刷新，获取{{this.last_sync_time}}前同步的数据</span>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" class="refresh_btn" @click="refresh_list">刷新</el-button>
                <el-button size="mini" type="primary" class="sync_btn" @click="again_sync">再次同步</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  import { api, baseAjax, h5Url } from '@/api/api';
  import pagination from '../public/pagination';
  import {statusCode} from '../../utils/index';
  import {formatHour, formatDate} from '../../utils/validate';
  import QRCode from 'qrcodejs2';
  import Cookies from 'js-cookie';

  export default {
    name:'liveBroadcastManagement',
    components: {pagination},
    data() {
      return {
        //分页
        page: {
          currentPage: 1,    //当前页
          pageSize: 10,    //每页显示条数
          totalPage: 0,   //总页数
          total:null   //总条数
        },
        live_title:'',   //标题筛选项
        project_name:null,  //相关项目筛选项
        project_list:[],   //项目下拉框值
        related_project_list:[],   //相关项目下拉框值
        live_status:'',   //状态筛选项
        live_status_list:[
          {
            id:'waiting',
            name:'未开始'
          },
          {
            id:'live',
            name:'直播中'
          },
          {
            id:'end',
            name:'已结束'
          },
          {
            id:'playback',
            name:'回放中'
          },
        ],   //状态下拉框值
        start_time:'',  //开始时间筛选项
        last_update_time:'',  //末次更新时间
        liveList:[],   //直播列表数据
        activeLink:false,   //是否打开活动链接弹框
        active_title:'',   //活动标题
        audience_active_url:'',   //观众活动链接
        teacher_active_web_url:'',   //讲师网页链接
        teacher_active_client_url:'',   //讲师客户端链接
        teacher_channel_id:'',   //讲师频道号
        teacher_channel_password:'',   //讲师频道号密码
        assistant_backstage_active_url:'',   //助教后台链接
        assistant_channel_content:[],   //助教频道号
        is_show_audience_copy_success:false,   //观众-是否显示复制成功
        is_show_teacher_copy_success:false,   //讲师-是否显示复制成功
        is_show_assistant_copy_success:false,   //助教-是否显示复制成功
        activeName:'audience',   //活动链接选中tab
        is_show_all_channel:true,  //助教-是否查看全部
        assistant_default_channel_id:'',  //默认频道号
        assistant_default_channel_password:'',   //默认频道密码
        user_info:{},
        sync_number:0,   //同步次数
        is_syncing:true,   //是否是同步中
        sync_data:false,   //是否提示同步数据
        last_sync_time:null,   //上次同步时间
        is_show_qr_code:false,   //是否显示二维码
        is_show_teacher_account_info:true   //是否显示讲师的账号信息
      }
    },
    mounted(){
      this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookies.get('user_info')));
      this.getLastUpdateTime();   //获取末次更新时间
      this.getProductList(); //获取产品
      this.getRelatedProductList();//获取相关产品
      this.getLiveList();//获取列表数据
      this.get_sync_status();   //获取同步数据状态
    },
    methods: {
      //修改列表tr颜色
      tableRowClassName({row, rowIndex}) {
          if (rowIndex % 2 === 1) {
          return 'success_row';
          }
          return '';
      },
      //改变当前页码
      handleCurrentChange(currentPage) {
          this.page.currentPage = currentPage;
          this.getLiveList();
      },
      //改变每页条数
      handlePageSize(pageSize){
          this.page.pageSize = pageSize;
          this.getLiveList();
      },
      //重置
      reset_list(){
        this.live_title = '';
        this.project_name = null;
        this.live_status = '';
        this.start_time = '';
      },
      //查询
      search_list(){
        this.handleCurrentChange(1);
      },
      //列表数据
      getLiveList(){
          let that = this;
          let data = {
              currentPage:this.page.currentPage,
              totalPage:this.page.totalPage,
              pageSize:this.page.pageSize,
              name:this.live_title,
              watchStatus:this.live_status,
              startTime:this.start_time ? formatHour(this.start_time) : '',
              productId:this.project_name
          };
          baseAjax(api.get_live_list, data, (res)=>{
              if(res.code === statusCode.success){
                  let {pageSize, totalPage, value, count} = res.data;
                  that.page.pageSize = pageSize;
                  that.page.totalPage = totalPage;
                  that.page.total = count;
                  that.liveList = value;
                  that.liveList.forEach(item=>{
                      item.productName = item.productName && item.productName.length ? item.productName.join(',') : '';
                      item.audience_active_url = h5Url+'/live/url/'+item.channelId;
                      item.teacher_active_web_url = 'https://live.polyv.net/web-start/classroom?channelId='+item.channelId;
                      item.teacher_active_client_url = 'https://live.polyv.net/start-client.html?channelId='+item.channelId;
                      item.assistant_backstage_url = 'https://live.polyv.net/teacher.html';
                      item.is_show_product_tip = false;   //是否显示全部项目名称
                      if(item.watchStatusText == '未开始'){
                          item.bgcolor = 'rgba(145, 147, 152, 0.2)';
                          item.color = '#919398';
                      }else if(item.watchStatusText == '直播中'){
                          item.bgcolor = 'rgba(26, 179, 148, 0.2)';
                          item.color = '#1AB394';
                      }else if(item.watchStatusText == '回放中'){
                          item.bgcolor = 'rgba(254, 159, 0, 0.2)';
                          item.color = '#FE9F00';
                      }else if(item.watchStatusText == '已结束'){
                          item.bgcolor = 'rgba(145, 147, 152, 0.2)';
                          item.color = '#919398';
                      }
                  });
              }
          });
      },
      //获取更新直播数据
      get_live_info(){
        let that = this;
        api.live_sync_data = {
            url:api.live_sync_data_url+'?repName='+this.user_info.name+'&reSync='+this.sync_number,
            method:api.live_sync_data.method
        }
        baseAjax(api.live_sync_data, '', (res)=>{
            if(res.code == 200){
                that.$alert(res.data).then((res)=>{
                    if(res == 'confirm'){
                        that.$router.go(0);
                        that.getLastUpdateTime();
                        that.getLiveList();
                    }
                    that.get_sync_status();
                });
            }else if(res.code == 20020){
                that.sync_data = true;
                let time = Number(res.data);
                if(res.data > 60){
                    let minute = parseInt(time/60);
                    let second = parseInt((parseFloat(time/60)-parseInt(time/60))*60);
                    that.last_sync_time = minute+'分'+second+'秒';
                }else{
                    that.last_sync_time = time + '秒';
                }
            }
        });
      },
      //获取是否是同步中状态
      get_sync_status(){
        let that = this;
        baseAjax(api.get_live_status, '', (res)=>{
            if(res.code === statusCode.success){
                if(res.data == true){   //获取更新
                    that.is_syncing = true;
                }else{
                    that.is_syncing = false;   //同步中
                }
            }
        });
      },
      //再次同步
      again_sync(){
          this.sync_data = false;
          this.sync_number = 1;
          this.get_live_info();
          this.getLastUpdateTime();
          this.getLiveList();
      },
      //刷新页面
      refresh_list(){
          this.get_sync_status();
          this.getLastUpdateTime();
          this.getLiveList();
          this.$router.go(0);
      },
      //获取末次更新时间
      getLastUpdateTime(){
        let that = this;
        baseAjax(api.get_live_last_update_time, '', (res)=>{
            if(res.code === statusCode.success){
                if(res.data == '未知'){
                    that.last_update_time = res.data;
                }else{
                    that.last_update_time = formatDate(Number(res.data));
                }
            }
        });
      },
      //获取所有产品
      getProductList(){
          let that = this;
          baseAjax(api.get_all_product, '', (res)=>{
              if(res.code === statusCode.success){
                  that.project_list = res.data;
              }
          });
      },
      //获取相关产品
      getRelatedProductList(){
        let that = this;
        baseAjax(api.get_all_product, '', (res)=>{
            if(res.code === statusCode.success){
                that.related_project_list = res.data;
                that.related_project_list.unshift({
                    id:0,
                    name:'未分配'
                });
            }
        });
      },
      //获取要编辑的信息
      get_edit_info(info){
        this.$router.push('/editLiveBroadcastManagement');
        Cookies.set('live_info', this.EncryUtil.encryptByAES(JSON.stringify(info)), {expires: 24 * 60 * 60 * 1000});
      },
      //查看链接
      show_link(info){
        this.activeLink = true;
        this.active_title = info.title;
        this.audience_active_url = info.audience_active_url+'?linkType=activity';
        this.teacher_active_web_url = info.teacher_active_web_url;
        this.teacher_active_client_url = info.teacher_active_client_url;
        this.teacher_channel_id = info.channelId;
        this.teacher_channel_password = info.channelPassword;
        this.assistant_backstage_active_url = info.assistant_backstage_url;
        this.assistant_channel_content = info.accountsInfo;
        this.assistant_default_channel_id = this.assistant_channel_content[0].assistantAccount;
        this.assistant_default_channel_password = this.assistant_channel_content[0].assistantPasswd;
        this.is_show_qr_code = true;
        this.creatQrCode(info.audience_active_url);   //生成二维码
      },
      //观众-复制链接
      audience_copy_link(){
          let that = this;
          this.is_show_audience_copy_success = true;
          setTimeout(()=>{
            that.is_show_audience_copy_success = false;
          }, 2000);
      },
      //讲师-复制链接
      teacher_copy_link(){
          let that = this;
          this.is_show_teacher_copy_success = true;
          setTimeout(()=>{
            that.is_show_teacher_copy_success = false;
          }, 2000);
      },
      //助教-复制链接
      assistant_copy_link(){
          let that = this;
          this.is_show_assistant_copy_success = true;
          setTimeout(()=>{
            that.is_show_assistant_copy_success = false;
          }, 2000);
      },
      //关闭活动链接弹框，重置activeName
      closeActiveDialog(done){
          this.activeName = 'audience';
          this.is_show_all_channel = true;
          this.is_show_qr_code = false;
          this.is_show_teacher_account_info = true;
          done();
      },
      //查看助教全部频道号
      showAllChannel(){
          if(this.is_show_all_channel == true){
              this.is_show_all_channel = false;
          }else{
              this.is_show_all_channel = true;
          }
      },
      //生成二维码
      creatQrCode(activeLink){
        let that = this;
        this.$nextTick(()=>{
            var code = new QRCode(that.$refs.qrCodeUrl, {
                text: activeLink, // 需要转换为二维码的内容
                width: 100,
                height: 100,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
            return code;
        });
      },
      //项目展示全部
      showProductTips(obj, row){
        /*obj为鼠标移入时的事件对象*/
        let currentWidth = this.showTips(row);
        /*cellWidth为表格容器的宽度*/
        const cellWidth = obj.target.offsetWidth

        /*当文本宽度小于||等于容器宽度3倍时，代表文本显示未超过3行*/
        currentWidth <= (3*cellWidth) ? row.is_show_product_tip = false : row.is_show_product_tip = true
        this.$forceUpdate();
        this.$set(row);
      },
      showTips(row){
        /*width为文本在页面中所占的宽度，创建标签，加入到页面，获取width,最后在移除*/
        let TemporaryTag = document.createElement('span');
        TemporaryTag.innerText = row.articleTitle;
        TemporaryTag.className = 'getTextWidth';
        document.querySelector('body').appendChild(TemporaryTag);
        let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
        document.querySelector('.getTextWidth').remove();

        return currentWidth;
      },
      //显示/隐藏讲师账号信息
      show_teacher_account(){
          if(this.is_show_teacher_account_info == true){
            this.is_show_teacher_account_info = false;
          }else{
              this.is_show_teacher_account_info = true;
          }
      }
    }
  }
</script>

<style lang="less" scoped>
.live_broad{
  font-family: PingFangSC-Regular, PingFang SC;
  .search{
      .left,.center{
          margin-right:52px;
          .project_name{
              margin-bottom:14px;
          }
          .search_list{
              /deep/.el-date-editor{
                  .el-input__prefix{
                      .el-input__icon{
                          line-height:32px;
                      }
                  }
                  .el-input__suffix{
                      .el-input__suffix-inner{
                          .el-input__icon{
                              line-height:32px;
                          }
                      }
                  }
              }
          }
      }
  }
  .live_list{
      /deep/.el-table{
          tbody{
              tr{
                  td{
                      padding:12px 0 13px 0;
                      .show_all_tip{
                        display:-webkit-box;
                        text-overflow:ellipsis;
                        overflow:hidden;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient:vertical;
                        cursor: pointer;
                      }
                  }
                  td:first-child{
                      padding-left:23px;
                  }
                  td:nth-child(4){
                      .cell{
                          line-height:21px;
                          span{
                              padding:4px 11px;
                              font-size:12px;
                          }
                      }
                  }
              }
          }
      }
  }

  .active_link_dialog{
    /deep/.el-dialog{
       .el-dialog__body{
           padding-top:14px;
           .el-tabs{
               .el-tabs__header{
                   margin-bottom:20px;
                   .el-tabs__nav-wrap{
                       .el-tabs__nav-scroll{
                           .el-tabs__nav{
                               .el-tabs__active-bar{
                                    height: 3px;
                                    background-color: #2A82E2;
                                    border-radius: 4px;
                               }
                               .el-tabs__item{
                                   height:38px;
                                   color:rgba(0, 0, 0, 0.7);
                               }
                               .el-tabs__item.is-top.is-active{
                                   color: #2A82E2;
                               }
                           }
                       }
                   }
                   .el-tabs__nav-wrap::after{
                        height: 1px;
                        background-color: #EEF0F3;
                        border-radius: 4px;
                   }
               }
               .el-tabs__content{
                   .el-tab-pane{
                       .copy_success{
                            color:#2A82E2;
                            font-size:13px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            display:flex;
                            justify-content:center;
                            height: 18px;
                       }
                   }
                   .tab_audience{
                       .active_title{
                           .search_value{
                               margin-left:0;
                           }
                       }
                   }
                   .tab_teacher{
                       .search_list{
                           .search_text{
                               width:16%;
                           }
                       }
                       .active_title{
                            .search_value{
                                margin-left:0;
                            }
                       }
                       .link_url{
                        .open_btn{
                            height: 32px;
                            background-color: #FFFFFF;
                            border-radius: 2px;
                            border: 1px solid #2A82E2;
                            padding: 7px 16px;
                            font-size: 13px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #2A82E2;
                            display:flex;
                            align-items:center;
                            margin-left:6px;
                            span{
                                width:26px;
                                margin-right:4px;
                            }
                        }
                        .open_btn:hover{
                            background-color: rgba(42, 130, 226, 0.12);
                        }
                       }
                       .channel_number{
                           margin-bottom:11px;
                           .search_text{
                               width:14.5%;
                           }
                           .el-button{
                               border:0;
                               border-color:transparent;
                               background-color:transparent;
                               padding:0;
                               font-size:16px;
                               border-radius:0;
                               color:rgba(0, 0, 0, 0.7);
                           }
                       }
                       .teacher_account_info{
                            margin-bottom:12px;
                            width: 320px;
                            height: 148px;
                            background-color: #F7F8FA;
                            border-radius: 2px;
                            border: 1px solid #DDDFE6;
                            padding:9px 16px 8px 16px;
                            box-sizing:border-box;
                            display:flex;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #C0C4CC;
                            margin-left:85px;
                            .channel{
                                width:142px;
                            }
                            .channel,.password{
                                span{
                                    margin-bottom: 9px;
                                    display: block;
                                }
                            }
                       }
                   }
                   .tab_assistant{
                       .search_list{
                           .search_text{
                               width:13%;
                           }
                       }
                       .active_title{
                            .search_value{
                                margin-left:0;
                            }
                       }
                       .link_url{
                        .open_btn{
                            height: 32px;
                            background-color: #FFFFFF;
                            border-radius: 2px;
                            border: 1px solid #2A82E2;
                            padding: 7px 16px;
                            font-size: 13px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #2A82E2;
                            display:flex;
                            align-items:center;
                            margin-left:6px;
                            span{
                                width:26px;
                                margin-right:4px;
                            }
                        }
                        .open_btn:hover{
                            background-color: rgba(42, 130, 226, 0.12);
                        }
                       }
                       .channel_number{
                           margin-bottom:11px;
                           .search_text{
                               width:12.5%;
                           }
                           .el-button{
                               border:0;
                               border-color:transparent;
                               background-color:transparent;
                               padding:0;
                               font-size:16px;
                               border-radius:0;
                               color:rgba(0, 0, 0, 0.7);
                           }
                       }
                       .assistant_account_info{
                            margin-bottom:12px;
                            width: 320px;
                            background-color: #F7F8FA;
                            border-radius: 2px;
                            border: 1px solid #DDDFE6;
                            padding:9px 16px 8px 16px;
                            box-sizing:border-box;
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #C0C4CC;
                            margin-left:74px;
                            .title{
                                margin-bottom: 12px;
                                span{
                                    width:142px;
                                    display:inline-block;
                                }
                            }
                            .info{
                                div{
                                    margin-bottom:8px;
                                    span:first-child{
                                        width:142px;
                                        display:inline-block;
                                    }
                                }
                            }
                       }
                   }
               }
           }
       } 
    }  
  }

  .sync_data{
      top:39%;
      /deep/.el-dialog{
            .el-dialog__body{
                padding-bottom:10px !important;
            }
            .is_sync_data{
                font-size:16px;
                margin-bottom:20px;
            }
            .refresh{
                color:#aba9a9;
            }
            .el-dialog__footer{
                .dialog-footer{
                    .refresh_btn{
                        background-color:#fff;
                        color:#409EFF;
                    }
                }
            }
      }
  }

  i {
    font-size: 20px;
  }
}
</style>
